<template>
	<view>
		<view class="actionBar" v-if="ReservationOrder.ReservationOrderState==2">
			<button v-if="LoginInfo !== 0" class="shareBtn" open-type="share"
				@click="shareHandle(ReservationOrderUser.UserID, 'ReservationOrders', ReservationOrder.ReservationOrderID, 6, '分享', 0)">
				<view class="absolute left right bottom" style="top: -40rpx;margin: auto;">
					<view class="iconfont icon-fenxiang1 bold" style="font-size: 52rpx;"></view>
				</view>
			</button>
			<button v-else class="shareBtn" open-type="share">
				<view class="absolute left right bottom" style="top: -40rpx;margin: auto;">
					<view class="iconfont icon-fenxiang1 bold" style="color:#646464;font-size: 52rpx;"></view>
				</view>
			</button>
			<view v-if="FavState == 0" class="favBtn"
				@click="favHandle(ReservationOrderUser.UserID, 'ReservationOrders', ReservationOrder.ReservationOrderID, 3, '收藏约单', 0)">
				<uni-icons type="star" size="34" color="#646464"></uni-icons>
			</view>
			<view v-else class="favokBtn"
				@click="favHandle(ReservationOrderUser.UserID, 'ReservationOrders', ReservationOrder.ReservationOrderID, -3, '取消收藏约单', 0)">
				<uni-icons type="star-filled" size="35" color="#FFDD00"></uni-icons>
			</view>
			<view class="baomingBtn" @click="onSpeedContact(ReservationOrderUser.UserID)">极速联系</view>
			<view class="baomingBtn" @click="yuedanBtn">约单TA</view>
		</view>

		<view class="commCards row-between" style="height:70rpx;"
			@click="navTo(`/artistesPages/pages/artister?artisterID=${ReservationOrder.UserID}`)">
			<view>
				<view class="NoticeUserHeadPic">
					<head-wear :width="90" :height="90" border-width="4" :WxHeadPic="ReservationOrderUser.WxHeadPic"
						:userInfo="ReservationOrderUser" :UserLevelID="ReservationOrderUser.UserLevelID"
						image-width="30" image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
				</view>
				<view class="marginLeft-20" style="float:left;">
					<view class="fs-30 row-start" style="max-width: 450rpx">
						<view class="one-ellipsis">{{ ReservationOrderUser.NickName }}</view>
						<view v-if="ReservationOrderUser.UserSex">
							<image src="/static/icon/boy.png" class="marginLeft-10 sex-image-size" mode="widthFix"
								v-if="JSON.parse(ReservationOrderUser.UserSex).value == 1"></image>
							<image src="/static/icon/girl.png" class="marginLeft-10 sex-image-size" mode="widthFix"
								v-if="JSON.parse(ReservationOrderUser.UserSex).value == 0"></image>
						</view>
						<auth-label v-if="ReservationOrderUser.isAuthOk == 2" :size="18" height="30"></auth-label>
						<personality-label v-if="ReservationOrderUser.BeautifulWomen == 1" :size="18"
							height="30"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="marginLeft-10 company-image-size"
							v-if="ReservationOrderUser.isCompanyAuth == 2"></image>

					</view>
					<view class="fs-22 marginTop-8" style="color:#999;">
						<text v-for="(item,index) in UserRoles" :key="index">
							{{ item.LabelName }}
							<text v-if="index < UserRoles.length - 1">・</text>
						</text>
						<text
							v-if="ReservationOrderUser.UserCity !== '请设置您所在的城市'">｜{{ ReservationOrderUser.UserCity }}</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="fs-20 flex-1 text-align-right" style="color:#2cff5d;"
					v-if="ReservationOrderUser.isOnline == 1">在线</view>
				<view class="fs-20 flex-1 text-align-right" style="color:#d6d6d6;" v-else>
					{{ $common.timeDiff(ReservationOrderUser.onlineTime,new Date()) }}
				</view>
				<view class="disflex jc-center ai-center marginTop-8"
					@click.stop="onComplaint(`/pages/index/complaint/index?UserID=${ReservationOrderUser.UserID}&FeedbackType=4&TargetID=${ReservationOrder.ReservationOrderID}`)">
					<uni-icons type="info" size="18" color="#999"></uni-icons>
					<text class="fs-22" style="color:#999;margin-left: 4rpx;">投诉</text>
				</view>
			</view>

		</view>

		<view class="commCards paddingBottom-20">
			<view class="fs-32 bold">
				<text>约{{ ReservationOrder.ClassName }}</text>
				<text style="margin-left:0rpx">・</text>
				<text v-if="ReservationOrder.PriceType && JSON.parse(ReservationOrder.PriceType).value === 1"
					style="color: #ff3737;">
					<text>¥</text>
					<text v-if="ReservationOrder.PriceQujian === 0">{{ ReservationOrder.Price|formatPrice }}</text>
					<text v-else>{{ ReservationOrder.StartPrice|formatPrice }} ~
						{{ ReservationOrder.EndPrice|formatPrice }}</text>
					<text v-if="ReservationOrder.Unit">{{ JSON.parse(ReservationOrder.Unit).text}}</text>
				</text>
				<text v-if="ReservationOrder.PriceType && JSON.parse(ReservationOrder.PriceType).value !== 1"
					style="color: #ff3737;">{{ JSON.parse(ReservationOrder.PriceType).result }}</text>
			</view>

			<view class="marginTop-10 line-height-50 fs-26 padding-all-20 borderR-10"
				style="background-color: #f6f6f6;">
				<view style="height: 50rpx;display: flex;">
					<view class="h-100"
						style="background-color: #FFDD00;padding-left: 14rpx;border-radius: 50rpx 0 0 50rpx;"><uni-icons
							type="location-filled" size="20"></uni-icons></view>
					<text class="city h-100" v-if="ReservationOrder.City"> 面向地区：{{ ReservationOrder.City }}</text>
				</view>
				<view class="address" v-if="ReservationOrder.ReservationOrderTimes">
					合作时间：{{ ReservationOrder.ReservationOrderTimes }}</view>
				<view class="times" v-if="ReservationOrder.ReservationOrderAdds">
					合作地点：{{ ReservationOrder.ReservationOrderAdds }}</view>
				<view class="pics" v-if="ReservationOrder.OrderLabels">
					<text>接单通告：</text>
					<text v-for="(item,index) in ReservationOrder.OrderLabels" :key="index">
						<text v-if="index>0">・</text>
						<text>{{ item.LabelName }}</text>
					</text>
				</view>
			</view>
			<view class="bottomInfo">
				<text>{{$common.timeDiff(ReservationOrder.addTime)}}更新</text>
				<text>{{ReservationOrder.isReadUsers? JSON.parse(ReservationOrder.isReadUsers).length: 0}} 阅读</text>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">
				<view class="borderR-5" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></view>
				<view class="marginLeft-10">约单详情</view>
			</view>
			<view class="marginTop-10">
				<view class="content row ai-start" style="color:#999;">
					<view
						style="width: 8rpx;height: 8rpx;background-color: #FFDD00;border-radius: 8rpx; margin-top: 18rpx;">
					</view>
					<view class="marginLeft-10 line-height-40"> {{ ReservationOrder.ReservationOrderMemo }} </view>
				</view>
				<view class="marginTop-20">
					<view style="height:auto"
						v-if="ReservationOrder.ReservationOrderPics && JSON.parse(ReservationOrder.ReservationOrderPics).length > 0">
						<view v-for="(itm,idx) in JSON.parse(ReservationOrder.ReservationOrderPics)" :key="idx"
							class="marginTop-20"
							@click="showPhoto(JSON.parse(ReservationOrder.ReservationOrderPics), idx)">
							<image :src="itm" mode="widthFix" class="w-100 h-100 borderR-10"></image>
						</view>
					</view>
					<view style="height:auto"
						v-if="ReservationOrder.ReservationOrderVideos && JSON.parse(ReservationOrder.ReservationOrderVideos).length > 0">
						<view v-for="(itm,idx) in JSON.parse(ReservationOrder.ReservationOrderVideos)" :key="idx">
							<video @play="play" @fullscreenchange="fullscreenchange" :src="itm"
								style="width:100%;height:378rpx" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commCards" style="height:100rpx;">
			<view class="commCardTitle">已收到约单{{ ReservationOrderBaoming.length }}人</view>
			<view class="marginTop-20" v-if="ReservationOrderBaoming.length > 0">
				<view v-for="(item,key) in ReservationOrderBaoming" :key="key">
					<view class="BaomingHeadPic">
						<zero-lazy-load borderRadius="70" height="70" :image="item.BaomingUser.WxHeadPic"
							imgMode='widthFix'></zero-lazy-load>
					</view>
				</view>
			</view>
		</view>

		<view class="commCards line-height-40" style="color:#999;line-height:40rpx;">
			温馨提示：平台禁止一切私房拍摄。双方私下沟通时注意防骗，切勿相信先缴纳费用的合作。如遇虚假通告、敲诈信息等不良行为，请立即向平台投诉。
		</view>
		<view style="height: 136rpx;"></view>

	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		filters: {
			formatPrice(price) {
				if (price > 1000) {
					return price / 1000 + 'k';
				} else if (price > 10000) {
					return price / 10000 + 'w';
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				LoginInfo: 0,
				OrderID: 0,
				ReservationOrderUser: {},
				UserRoles: [],
				ReservationOrder: {},
				ReservationOrderBaoming: [],
				$MyReservationOrderAction: [],
				ShareState: 0,
				FavState: 0,
				baseUrl: ''
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			// console.log(option.OrderID)
			this.OrderID = option.OrderID
			if (uni.getStorageSync("isLogin")) {
				this.LoginInfo = uni.getStorageSync("isLogin");
			}
			this.inviter = uni.getStorageSync("isLogin").UserID
			wx.showShareMenu({
				withShareTicket: true
			})
			this.getReservationOrder()
		},
		onShareAppMessage({
			from,
			target
		}) {

			let userinfo = this.ReservationOrderUser.NickName;

			let myObj = {
				title: this.ReservationOrder.ReservationOrderMemo,
				path: "/reservationorder/details?inviter=" + this.inviter + "&OrderID=" + this.OrderID,
				success: (res) => {
					// console.log('分享成功', res)
				},
				fail: (err) => {
					// console.log('分享失败', err)
				}
			}

			return myObj;
		},
		methods: {
			// 投诉
			onComplaint(url) {
				if (!uni.getStorageSync("isLogin")) {
					this.$common.goNavPage('/pages/login/weixinlogin');
					return;
				}
				this.navTo(url)
			},

			showPhoto(photos, index) {
				// console.log('photos', photos)
				// console.log('index', photos)
				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})
			},
			// 极速联系
			onSpeedContact(UserID) {
				let isLogin = uni.getStorageSync("isLogin");
				if (!isLogin) {
					this.$common.goNavPage('/pages/login/weixinlogin');
					return;
				}

				if (this.ReservationOrderUser.UserID == isLogin.UserID) {
					uni.showToast({
						title: '自己不能联系自己！',
						icon: 'none'
					});
					return false;
				}
				this.navTo(`/artistesPages/pages/speedContact?ArtisterID=${UserID}`)
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getReservationOrder() {
				this.$httpost('/Home/ReservationOrderDetails', {
					ReservationOrderID: this.OrderID
				}).then(res => {
					// console.log('ReservationOrderDetails', res);
					if (res.code == 200) {
						this.ReservationOrderUser = res.data.ReservationOrderUser
						this.ReservationOrder = res.data.ReservationOrder
						this.UserRoles = res.data.UserRoles
						this.ReservationOrderBaoming = res.data.ReservationOrderBaoming
						this.$MyReservationOrderAction = res.data.$MyReservationOrderAction

						this.$MyReservationOrderAction.forEach((item, index) => {
							if (item.ActionType == 3) {
								this.FavState = 1;
							}
							if (item.ActionType == 30) {
								this.FavState = 0;
							}
							if (item.ActionType == 6) {
								this.ShareState = 1;
							}
							if (item.ActionType == 60) {
								this.ShareState = 0;
							}
						});
					}

				});
			},
			shareHandle(ArtisterID, ActionTable, ActionID, ActionType, ActionName, GetWallet) {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/UserAction', {
						ArtisterID: ArtisterID,
						ActionType: ActionType,
						ActionName: ActionName,
						ActionTable: ActionTable,
						ActionID: ActionID,
						GetWallet: GetWallet,
						AddValue: ''
					}).then(res => {
						// console.log('favNotice', res);
						if (res.code == 200) {
							if (res.data !== 0) {
								this.getReservationOrder()
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			},
			favHandle(ArtisterID, ActionTable, ActionID, ActionType, ActionName, GetWallet) {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/UserAction', {
						ArtisterID: ArtisterID,
						ActionType: ActionType,
						ActionName: ActionName,
						ActionTable: ActionTable,
						ActionID: ActionID,
						GetWallet: GetWallet,
						AddValue: ''
					}).then(res => {
						// console.log('favNotice', res);
						if (res.code == 200) {
							if (res.data !== 0) {
								this.getReservationOrder()
								if (ActionName == '收藏约单') {
									uni.showToast({
										title: '收藏成功',
										icon: 'success'
									})
								}
								if (ActionName == '取消收藏约单') {
									uni.showToast({
										title: '取消收藏',
										icon: 'success'
									})
								}
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			},
			yuedanBtn() {
				let isLogin = uni.getStorageSync("isLogin");

				if (isLogin) {
					if (this.ReservationOrderUser.UserID == isLogin.UserID) {
						uni.showToast({
							title: '自己不能约单自己！',
							icon: 'none'
						});
						return false;
					}
					this.$common.goNavPage('/reservationorder/baoming?OrderID=' + this.OrderID +
						'&coverReservationorderID=' + this.ReservationOrderUser.UserID);
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			}
		}
	}
</script>

<style lang="scss">
	.authed {
		position: absolute;
		z-index: 100;
		right: -5rpx;
		top: -5rpx;
		display: flex;
		align-items: flex-end;
	}

	.NoticeUserHeadPic {
		position: relative;
		width: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;
		background-color: #CCC;
		float: left;
	}

	.NoticeUserHeadPic image {
		width: 100%;
		height: 100%;
		border-radius: 60rpx;
	}

	.actionBar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		right: 0;
		height: 125rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
		padding: 0 20rpx;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 230rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.baominger {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
		background-color: #CCC;
		float: left;
		margin-left: -10rpx;
	}

	.shareBtn {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
		position: relative;
		margin: 20rpx 20rpx 0 0;

		&::after {
			border: none;
		}
	}

	.favBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		color: #646464;
		margin: 10rpx 40rpx 0 0;
	}

	.favokBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		color: #646464;
		margin: 10rpx 40rpx 0 0;
	}

	.BaomingHeadPic {
		float: left;
		width: 70rpx;
		height: 70rpx;
		border-radius: 60rpx;
		margin-left: -5rpx;
	}

	.city {
		border-radius: 0 50rpx 50rpx 0;
		background-color: #FFDD00;
		font-size: 24rpx;
		padding: 0rpx 14rpx 0 14rpx;
		display: inline-block;
	}

	.bottomInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #d6d6d6;
		margin-top: 20rpx;
		border-top: 1px solid #f6f6f6;
		padding-top: 20rpx;
	}
</style>